<template>
	<view class="container">
		<view class="line"></view>
		<view class="header">
			<image :src="recordIcon"></image>
			<view class="title">详细内容</view>
		</view>
		<view class="list">
			<view class="item">
				<view class="left">智汇币</view>
				<view class="right">-20</view>
			</view>
			<view class="item">
				<view class="left">交易类型</view>
				<view class="right">打赏</view>
			</view>
			<view class="item">
				<view class="left">交易时间</view>
				<view class="right">2020-09-20  15:29:18</view>
			</view>
			<view class="item">
				<view class="left">流水号</view>
				<view class="right">123456789011545648791</view>
			</view>
			<view class="item">
				<view class="left">备注</view>
				<view class="right">备注内容</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				recordIcon:this.$mAssetsPath.recordIcon
			}
		},
		methods: {

		}
	}
</script>

<style scoped lang="scss">
	.container {
		.line {
			width: 100%;
			height: 20upx;
			background-color: #F5F5F9;
		}
		.header{
			display: flex;
			align-items: center;
			padding: 30upx 30upx 10upx 30upx;
			image{
				width: 60upx;
				height: 60upx;
			}
			.title{
				margin-left: 15upx;
				color: #AB61FF;
				font-size: 32upx;
			}
		}
		.list {
			width: 100%;

			.item {
				height: 77upx;
				border-bottom: #f4f4f4 solid 1upx;
				display: flex;
				justify-content: space-between;
				padding: 0 30upx;
				align-items: center;
				font-size: 30upx;

				.left {
					color: #0D1D36;
				}

				.right {
					color: #888D99;
				}
			}
		}
	}
</style>
